<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页</title>
<!--    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>-->
    <link rel="stylesheet" href="/css/login.css">
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/login.js"></script>
</head>
<body>
    <div class="stars"></div>
    <div id="bg" class="login-bg"></div>
    <div class="login-header">
        <a href="javascript:void(0);" id = "link">您好！点击登录</a>
    </div>
    <div class="login">
        <div class="title">
            登录<span><a href="javascript:void(0);" class="close-login" >关闭</a></span>
        </div>
            <form class="login-input" id="form">
                <div>
                    <span>用户名：</span>
                    <input type="text" id="name"  placeholder="请输入用户名..">
                </div>
                <div>
                    <span>密码：</span>
                    <input type="password" id="password"  placeholder="请输入密码..">
                </div>
                <div>
                    <span>验证码：</span>
                    <input id="verifyInput"  name="verifyInput" placeholder="请输入验证码..">
                    <img class="verifyCode" onclick="changeCode()" src="getVerifyCode" style=" height: 40px;width: 130px;margin-left: 133px;">
                </div>
                <div>
                    <input type="button" style="cursor: pointer" value="登录" onclick="send()" class="btn">
<!--                    <input type="button" style="margin-left:100px;cursor: pointer" value="我已登录" onclick="toHome()" class="btn">-->
                    <input type="button" class="btn" style="margin-left:100px;cursor: pointer" onclick="toRegister()" value="没账号？去注册">


                </div>
            </form>




    </div>
</body>
<script>
    // var userinfo = {
    //     'name' : 'fmy',
    //     'password' : '123456'
    // };
    function changeCode(){

        var src = "getVerifyCode?"+new Date().getTime(); //加时间戳，防止浏览器利用缓存

        $('.verifyCode').attr("src",src);                  //jQuery写法

    }
    function toRegister() {
        window.open('/register','_self')
    }
    function toHome() {
        window.open('/home','_self')
    }

    //检验非法字符
    function CheckStr(str){
        var myReg = /^[^@\/\'\\\"#$%&\^\*]+$/;
        if(myReg.test(str)) return true;
        return false;
    }

    function send() {
        var name = $("#name").val();
        var password = $("#password").val();
        var userinfo = {
            'name': name,
            'password': window.btoa(password)//base64加密
        };
        var VerifiCode = document.getElementById("verifyInput").value;
        //简单的登录验证
        name = name.replace(/\s*/g, "");//	去除空格  防止用户误点
        password = password.replace(/\s*/g, "");
        VerifiCode = VerifiCode.replace(/\s*/g, "");
        if (name == "") {
            alert("用户名不能为空");
            document.getElementById("name").focus();//获取焦点
        } else if (password == "") {
            alert("密码不能为空");
            document.getElementById("password").focus();
        } else if (VerifiCode == "") {
            alert("验证码不能为空");
            document.getElementById("verifyInput").focus();
        } else if(CheckStr(name) ==false || CheckStr(password) == false || CheckStr(VerifiCode) == false){
            alert("请勿包含非法字符如[#_%&'/\",;:=!^]");
        } else {//字段都不为空再提交数据
            $.ajax({
                    url: '/login' + '?code=' + $("#verifyInput").val(),
                    type: 'POST',
                    dataType: 'json',
                    contentType: 'application/json',
                    data: JSON.stringify(userinfo),
                    success: function (data) {
                        if (data == '-3') {
                            alert('请刷新验证码')
                        }
                        if (data == '-2') {
                            alert("验证码错误");
                        }
                        if (data == '1') {
                            alert("登录成功")
                            toHome();
                        } else if (data == '0') {
                            alert("密码错误")
                        } else if (data == '-1') {
                            alert("该账号不存在")
                        } else if (data == '2') {
                            alert("当前在线")
                        }
                    }
                }
            )
        }
    }
    function getCookie(name) {
        var allcookies = document.cookie;
        var cookie_pos = allcookies.indexOf(name);
        if (cookie_pos != -1) {
            cookie_pos += name.length + 1;
            var cookie_end = allcookies.indexOf(';', cookie_pos);
            if (cookie_end == -1) {
                cookie_end = allcookies.length;
            }
            var value = unescape(allcookies.substring(cookie_pos, cookie_end))
        }
        return value;
    }

    function clearAllCookie() {
        var keys = document.cookie.match(/[^ =;]+(?=\=)/g);
        var date = new Date();
        date.setTime(date.getTime() - 1);
        if (keys) {
            for (var i = keys.length; i--;) {
                document.cookie = keys[i] + '=0;expires' + date.toUTCString();
            }
        }
    }
</script>
</html>
